<template>
  <view>
    <view class="nav ui-flex">
      <view class="nav-left">
        <scroll-view scroll-y class="nav-left--scroll">
          <view
            class="nav-left-item"
            :class="[index==categoryActive ? activeNavClass : '']"
            v-for="(item,index) in categoryList"
            @click="categoryClickMain(item,index)"
            :key="index"
          >{{item[label]}}</view>
        </scroll-view>
      </view>
      <view class="nav-right" :class="rightBoxClass">
        <slot name="rightheader"></slot>
        <scroll-view scroll-y :scroll-top="scrollTop" @scroll="scroll" scroll-with-animation>
          <slot name="rightcontent"></slot>
        </scroll-view>
        <!-- <list
            :enableBackToTop="enableBackToTop"
            loadmoreoffset="15"
            :scroll-y="scrollY"
            @loadmore="loadMore"
            class="nav-right--scroll"
          >
            
        </list>-->
        <!-- <view
            class="nav-right-item"
            v-for="(item,index2) in subCategoryList"
            :key="index2"
            @click="categoryClickSub(item)"
          >
            <image :src="item[imgSrc]" />
            <view>{{item[label]}}</view>
        </view>-->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "category",
  data() {
    return {
      height: 0,
      scrollTop: 0,
      scrollHeight: 0,
      categoryActive: 0,
      activeStyle: {
        color: this.activeTextColor,
        backgroundColor: this.activeBackgroundColor
      }
    };
  },
  props: {
    //主分类激活索引
    defaultActive: {
      type: Number,
      default: 0
    },
    //主分类List
    categoryList: {
      type: Array,
      default: () => {
        return null;
      }
    },
    //侧边分类List
    subCategoryList: {
      type: Array,
      default: () => {
        return null;
      }
    },
    activeNavClass: {
      type: String,
      default: "is-active"
    },

    activeBackgroundColor: {
      type: String,
      default: "#e5e5e5"
    },
    label: {
      type: String,
      default: "label"
    },
    imgSrc: {
      type: String,
      default: "logo"
    },
    //主分类点击事件
    categoryMainClick: {},
    //子分类点击事件
    categorySubClick: {},

    rightBoxClass: String,

    enableBackToTop: {
      type: [Boolean, String],
      default: false
    },
    scrollY: {
      type: [Boolean, String],
      default: false
    }
  },
  methods: {
    scroll(e) {
      this.scrollHeight = e.detail.scrollHeight;
    },
    categoryClickMain(category, index) {
      this.$emit("categoryMainClick", category);
      this.categoryActive = index;
      this.scrollTop = -this.scrollHeight * index;
    },
    categoryClickSub(category) {
      this.$emit("categorySubClick", category);
    },

    loadMore(e) {
      this.$emit("scrolltolower");
    }
  },
  created() {
    this.firstChildAppend = false;
  },
  mounted() {
    this.categoryActive = this.defaultActive;
    uni.getSystemInfo({
      success: res => {
        this.height = res.screenHeight - 100 / res.pixelRatio;
      }
    });
  },
  watch: {
    subCategoryList(newValue, oldValue) {}
  }
};
</script>

<style scoped lang="scss">
.nav {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  align-items: flex-start;

  .nav-left--scroll,
  .nav-right--scroll {
    height: 100%;
  }
}

.nav-left {
  flex: 0 0 250rpx;
  align-items: flex-start;
  width: 250rpx;
  overflow-y: auto;
  .nav-left-item {
    height: 120rpx;
    line-height: 120rpx;
    position: relative;
    border-left: 0;
    padding: 0 0 0 42rpx;
    color: #7b8196;
    font-size: 30rpx;
    &.is-active {
      background-color: $fill-base;
      color: #2c2c35;
      &::before {
        position: absolute;
        top: 50%;
        left: 22rpx;
        width: 8rpx;
        height: 36rpx;
        transform: translateY(-50%);
        background-color: $brand-primary;
        content: " ";
      }
    }
  }
}

.nav-right {
  position: absolute;
  top: 0;
  left: 250rpx;
  bottom: 0;
  right: 0;
  width: 500rpx;
  overflow-y: auto;
  background-color: $fill-base;
  .nav-right-item {
    width: 28%;
    height: 100px;
    float: left;
    text-align: center;
    padding: 5px;
    font-size: 13px;
    image {
      width: 50px;
      height: 50px;
    }
  }
}
</style>
